<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #5d3800;
        }
        .face{
            position: relative;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: #ffcd00;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .face::before{
            content: "";
            position: absolute;
            top: 210px;
            width: 150px;
            height: 70px;
            background: #b57700;
            border-bottom-left-radius: 70px;
            border-bottom-right-radius: 70px;
            transition: 0.5s;

        }
        .face:hover::before{
            top: 210px;
            width: 150px;
            height: 20px;
            background: #b57700;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }
        .eyes{
            position: relative;
            top: -40px;
            display: flex;

        }
        .eyes .eye{
            position: relative;
            width: 80px;
            height: 80px;
            display: block;
            background: #fff;
            margin: 0 15px;
            border-radius: 50%;
        }

        .eyes .eye::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 25px;
            transform: translate(-50%,-50%);
            width: 40px;
            height: 40px;
            background: #333;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <audio autoplay src="http://m10.music.126.net/20191026121458/daa367cc7e69896f2fbaf1a84725f7fd/ymusic/2d16/81a0/fac5/c4b739cfb67de997de219c432710e4c3.mp3"></audio>

    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
    <script>
        document.querySelector('body').addEventListener('mousemove',eyeball);
        function eyeball(){
            var eye = document.querySelectorAll('.eye');
            eye.forEach(function(eye){
                let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
                let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
                let radian = Math.atan2(event.pageX - x, event.pageY - y);
                let rot = (radian * (180 / Math.PI) * -1) + 270;
                eye.style.transform = "rotate(" + rot + "deg)";
            });
        }
    </script>
</body>
</html>
